<template>
	<view class="eightCharacterExplan">
		<image class="app_bg" src="https://sspzjz.oss-cn-shanghai.aliyuncs.com/yys/bj.png" />
    <view class="eightCharacterExplan_title">
      <image src="../../static/pages/bzssz_title.png" />
    </view>
    <view class="eightCharacterExplan_text">
      “解读个人八字，揭示命运走势”
    </view>
    <view class="eightCharacterExplan_image">
      <image src="../../static/pages/bg_icon.png" />
    </view>
    <view class="eightCharacterExplan_bg">
      <image src="../../static/pages/bg.png" />
      <view class="eightCharacterExplan_bg_con">
        <view class="eightCharacterExplan_con_box">
          <view class="eightCharacterExplan_con">
            <view>
              <view class="eightCharacterExplan_input">
                <input size="small" v-model="model.userName" placeholder="请输入姓名（必须汉字）" />
              </view>
            </view>
          </view>
          <view class="eightCharacterExplan_con">
            <view>
              <view class="eightCharacterExplan_radio">
                <radio-group @change="radioChange">
                  <label class="uni-list-cell uni-list-cell-pd" style="margin-right: 20rpx;">
                    <radio value="男" color="#724639"
                     :checked="'男' === model.sex" />男
                  </label>
                  <label class="uni-list-cell uni-list-cell-pd">
                    <radio value="女" color="#724639"
                     :checked="'女' === model.sex" />女
                  </label>
                </radio-group>
              </view>
            </view>
          </view>
          <view class="eightCharacterExplan_con">
            <view>
              <view class="eightCharacterExplan_input">
                <picker mode="date" @change="birthdayChange">
                  <view class="eightCharacterExplan_date">
                    <view class="eightCharacterExplan_date_title" v-if="model.birthday">
                      {{ model.birthday }}
                    </view>
                    <view class="eightCharacterExplan_date_titleNone" v-else>请选择出生日期（公历）</view>
                  </view>
                </picker>
              </view>
            </view>
          </view>
          <view class="eightCharacterExplan_con">
            <view>
              <view class="eightCharacterExplan_input">
                <picker mode="selector" :value="model.birthTimeValue"
                 @change="birthTimeChange" :range="birthTimeList">
                  <view class="eightCharacterExplan_date">
                    <view class="eightCharacterExplan_date_title" v-if="model.birthTime">
                      {{ model.birthTime }}
                    </view>
                    <view class="eightCharacterExplan_date_titleNone" v-else>请选择出生时辰</view>
                  </view>
                </picker>
              </view>
            </view>
          </view>
        </view>
        <view class="eightCharacterExplan_btn_box">
          <view class="eightCharacterExplan_btn" @click="addOrder">
            <image class="eightCharacterExplan_btn_icon" src="../../static/pages/btn_bg.png" />
            <view class="eightCharacterExplan_btn_title">立即测算</view>
          </view>
          <view class="eightCharacterExplan_statement">
            <checkbox :checked="checked" color="#724639" @change="checkedChange" />
             <view class="eightCharacterExplan_statement_title1">我已同意并阅读</view>
             <view class="eightCharacterExplan_statement_title2">《服务声明及隐私条款》</view>
          </view>
        </view>
      </view>
    </view>
	</view>
</template>

<script setup>
import request from '../../common/js/request'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { birthTimeList } from '@/common/js/data'

onLoad((opt)=>{
  packageData.value = JSON.parse(opt.packageData);
})

let model = ref({
  userName: '',
  birthday: '',
  sex: '',
  birthTime: '',
  birthTimeValue: null,
});
let packageData = ref(null);
let checked = ref(true);

// 生日变化
const birthdayChange = function (e) {
  let date = new Date(e.detail.value);
  let month = (date.getMonth() + 1) >= 10 ? (date.getMonth() + 1) : '0' + (date.getMonth() + 1);
  let day = date.getDate() >= 10 ? date.getDate() : '0' + date.getDate();
  model.value.birthday = date.getFullYear() + '-' + month + '-' + day;
}
// 生辰时间变化
const birthTimeChange = function (e) {
  model.value.birthTime = birthTimeList[e.detail.value];
  model.value.birthTimeValue = e.detail.value;
}
// 性别选择
const radioChange = function (e) {
  model.value.sex = e.detail.value;
}
// 服务声明及隐私条款
const checkedChange = function (e) {
  checked.value = e.detail.value;
}
const toPages = function (path) {
	uni.navigateTo({
		url: path
	});
}
// 订单接口
const addOrder = function () {
  let title = null;
  if(!checked.value) {
    title = '请阅读并同意声明';
  }else if(!model.value.userName) {
    title = '请输入姓名';
  }else if(!model.value.sex) {
    title = '请选择性别';
  }else if(!model.value.birthday) {
    title = '请选择出生日期';
  }else if(!model.value.birthday) {
    title = '请选择出生时辰';
  }
  if(title) {
    uni.showToast({ title })
    return
  }
  let { id, name, type } = packageData.value;
  let { userName, birthday, sex, birthTime, birthTimeValue } = model.value;
  let params = {
    packageId: id,
    packageName: name,
    orderType: type,
    userName,
    birthday,
    sex,
    birthTime,
    time: (birthTimeValue + 1)
  }
  request('/api/busi/busi/yys/order/add', params).then((res)=>{
    if(res.status == 200) {
      toPages('/pages/result/index?id=' + res.data);
    }else {
      uni.showToast({ title: res.message })
    }
  })
}
</script>

<style lang="less" scoped>
.eightCharacterExplan {
  position: relative;
  .eightCharacterExplan_title {
    margin: 0 auto 0;
    padding-top: 20rpx;
    width: 220px;
    height: 70px;
    &>image {
      width: 100%;
      height: 100%;
    }
  }
  .eightCharacterExplan_text {
    font-size: 32rpx;
    font-weight: 500;
    letter-spacing: -2rpx;
    line-height: 20rpx;
    color: rgba(56, 56, 56, 1);
    text-align: center;
    vertical-align: top;
  }
  .eightCharacterExplan_image {
    margin: 30rpx auto 0;
    width: 320rpx;
    height: 320rpx;
    &>image {
      width: 100%;
      height: 100%;
    }
  }
  .eightCharacterExplan_bg {
    position: absolute;
    top: 94%;
    left: 50%;
    transform: translateX(-50%);
    width: 684rpx;
    height: 864rpx;
    opacity: 1;
    &>image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
  .eightCharacterExplan_bg_con {
    position: absolute;
    top: 13.5%;
    left: 50%;
    transform: translateX(-50%);
    width: 460rpx;
    height: 630rpx;
  }
  .eightCharacterExplan_con_box {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    width: 100%;
    height: 70%;
    margin-bottom: 10%;
  }
  .eightCharacterExplan_con {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .eightCharacterExplan_con view {
    width: 100%;
  }
  .eightCharacterExplan_con_title {
    font-size: 32rpx;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 26rpx;
    color: rgba(56, 56, 56, 1);
    margin-bottom: 20rpx;
  }
  .eightCharacterExplan_input {
    width: 100%;
    border-radius: 8rpx;
    border: 2rpx solid rgba(241, 221, 186, 1);
    overflow: hidden;
    &>input {
      width: 100%;
      font-size: 28rpx;
      font-weight: 500;
      letter-spacing: 0;
      line-height: 44rpx;
      padding: 8rpx 16rpx;
      color: rgba(166, 166, 166, 1);
    }
  }
  .eightCharacterExplan_btn_box {
    position: relative;
    .eightCharacterExplan_btn {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      .eightCharacterExplan_btn_icon {
        margin: 0 auto;
        width: 324rpx;
        height: 96rpx;
      }
      .eightCharacterExplan_btn_title {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 32rpx;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 46rpx;
        color: rgba(246, 237, 216, 1);
        text-align: left;
        vertical-align: top;
      }
    }
  }
  .eightCharacterExplan_date {
    box-sizing: border-box;
    background: #ffffff;
    padding: 16rpx 20rpx;
    font-size: 28rpx;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 44rpx;
    text-align: left;
    vertical-align: top;
    .eightCharacterExplan_date_title {
      color: #A6A6A6;
    }
    .eightCharacterExplan_date_titleNone {
      color: #CCCCCC;
    }
  }
  .eightCharacterExplan_statement {
    display: flex;
    justify-content: center;
    align-items: center;
    .eightCharacterExplan_statement_title1 {
      font-size: 20rpx;
      font-weight: 500;
      letter-spacing: 0;
      line-height: 29rpx;
      color: rgba(56, 56, 56, 1);
    }
    .eightCharacterExplan_statement_title2 {
      font-size: 20rpx;
      font-weight: 500;
      letter-spacing: 0;
      line-height: NaNpx;
      color: rgba(117, 72, 59, 1);
      text-align: left;
      vertical-align: top;
      text-decoration: underline;
    }
  }
}
</style>